/*CHROME IN WINDOWS ONLY*/
@media screen and (min-width: 737px){
.plain-characterName {font-size:140%}
}
body {
transition: all cubic-bezier(.165,.84,.44,1) .2s ;
background-color:#f2f2f2;
background-repeat: repeat-x;
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
}
p {display: block;
      margin-block-start: 0.2em;
      margin-block-end: 0.2em;
}
hr{
margin:2px 0 2px 0;opacity: .5;
}
.plain-characterName {
margin-block-start: 0.5em;
margin-left: 12%;
position: relative;left:0px;
font-size:4.5vmin;font-family: "Arial","helvetica","Noto Sans CJK JP","华文黑体","Adobe 黑体 Std L","Simhei","黑体",Sans-serif;
text-shadow: 0 0 2px #000,0 0 3px #000,0 1px 2px #000,0 1px 2px #000;
height: 7.8vh;
color:#fff
}
.plain-dialogue {word-wrap: break-word;
word-break: normal;
position: relative;;
width:70%;
margin-left: 15%;
top:3%;
height: 27vh;
font-size:4vmin;
font-family: "Arial","helvetica","Noto Sans CJK JP","华文黑体","Adobe 黑体 Std L","Simhei","黑体",Sans-serif;
text-shadow: 0 0 2px #000,0 1px 2px #000,0 0 3px #000,0 1px 2px #000;
color:#fff
}
button:focus{
outline-style: none
}
button {
font-family: "SF Pro Text","Arial","思源黑体","思源黑体 CN","Noto Sans SC Regular",Sans-serif;border: 0px;
min-height: 23px;min-width: 40px;
background-color: #ddd;
border-radius: 3px;
}
.option:hover{background-color: #ddd;outline: 2px solid #666;}
.option:focus{font-size: 3.8vmin;background-color: #ccc;outline: 2px solid #aaa}
.option{position: relative;top: -12px;font-size: 3.8vmin;width: 100%;outline: 2px solid #ddd;cursor:pointer;margin-bottom: 5px;}
.button-reName{visibility: inline-block;float:right;cursor:pointer;}
.area-text{
background: -moz-linear-gradient(top, rgba(28, 156, 113, 0), rgb(45, 134, 104)); 
background: -moz-linear-gradient(to bottom, rgba(28, 156, 113, 0), rgb(45, 134, 104)); 
background: -ms-linear-gradient(top, #79edf500, #2d8668); 
background: -o-linear-gradient(top, #79edf500, #2d8668); 
background: -webkit-linear-gradient(top, rgba(28, 156, 113, 0), rgb(45, 134, 104));
}
.area-main{
position:fixed;
bottom: 0px;
left: 0;
right: 0;
padding: 30% 0 0 0;
background-clip: padding-box;border-radius:2px;
height:35vh;
width: 100%;
}

.area-toolbar {
position: fixed;
top: 0px;
background-color: #f0d9e700;
width: 50px;
height: 100%;
transition: all 0.05s;
}
.button-default {
height: 40px;
font-size: 14px;
margin-left:5px;
}
.button-default:hover{outline: 0;}
#cStart{display: none;
position: absolute;
top: 0px;left:46px;
width: auto;
padding: 0 20px;
height: 100%;
background-color: rgb(241, 245, 247);
transform: translateX(-100px);
transition:all 0.1s;
opacity: .0;
}
#ctrlBar{
      position:fixed;
      bottom: 0%;
      right:0%;
      height: auto;
      margin: 0 5%;
      width: auto;
      border-radius: 5px;
}
.button-ctrl{
      background-color: transparent;
      color:#fff;
      text-shadow:0 0 3px #000,0 0 3px #000;
      width: 60px;
}

.menubar-menu-items-holder{
      background-color: #f2f2f2;
      font-size: 12px;
      padding: 1px;
      box-shadow: 2px 2px 1px rgb(0 0 0 / 30%);
      border:1px solid #999
}
.menubar-menu-items{
      padding: 2px 20px;
}
.menubar-menu-items:hover{
      background-color: #91c9f7;
}
path.path935{
      stroke:#111;
}
@media (prefers-color-scheme: light) {
      #titlebar{
            background-color: transparent;}
      .window-icon{
      color:#222}
      .window-icon:hover{
            background-color: rgba(0, 0, 0, .1);
      }
      rect.minim{
            fill:#111
      }
      rect.rect99{
            stroke:#111;
      }
      path.path1322{
            fill:#111
      }
      path.path935{
            stroke:#111;
      }
      .menubar-menu-title{
            color: #222;
      }
      #closeIcon:hover{
            filter: invert(100%);
      }
      .menubar>.menubar-menu-button:hover{
            background-color: rgba(0, 0, 0, .1);
      }
      .menubar-menu-items-holder{
            background-color:#f2f2f2;
            line-height: 20px;
      }
      .plain-uname:hover{
      background-color: rgba(0, 0, 0, .1);  
      }
}
@media (prefers-color-scheme: dark) {
      #titlebar{
      background-color: #000a;
      }
      .window-icon{color: #ddd;}
      .window-icon:hover{
            background-color: rgba(255, 255, 255, .12);
      }
      rect.minim{
            fill:#ddd
      }
      rect.rect99{
            stroke:#ddd;
      }
      path.path1322{
            fill:#ddd;
      }
      path.path935{
            stroke:#ddd;
      }
      .window-title{
            color:#ddd
      }
      .menubar-menu-title{
            color: #ddd;
      }
      .menubar>.menubar-menu-button:hover{
            background-color: rgba(229,243,255, .12);
      }
      .menubar-menu-items-holder{
            background-color: #2b2b2b;
            color:#fff;
      }
      .plain-uname:hover{
      background-color: rgba(255, 255, 255, .12);  
      }
      .menubar-menu-items:hover{
      background-color: #5f5f5f;
      }
      .plain-uname{
      color:#ddd;
      }
}

#titlebar{
/* backdrop-filter: blur(10px); */
-webkit-app-region: drag;
      box-sizing: border-box;
      width: 100%;
      padding: 0;
      overflow: hidden;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      user-select: none;
      -webkit-user-select: none;
      zoom: 1;
      line-height: 22px;
      height: 22px;
      display: flex;
}
.window-controls-container{
      -webkit-app-region: no-drag;
      z-index: 3000;
      white-space: normal;
      height: 100%;
      width: 184px;
      margin-left: 0;
      display: flex;
      flex-grow: 0;
      flex-shrink: 0;
      text-align: center;
      justify-content: left;
      
}
.window-icon{
    display: inline-block;
    line-height: 30px;
    height: 100%;
    width: 46px;
    font-size: 16px;
    text-decoration: none;
    text-rendering: auto;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    transition: all 0.1s;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
}
.window-close:hover{
      background-color: rgba(232,17,35);
}
.window-title{
    flex: 0 1 auto;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: Segoe WPC,Segoe UI,sans-serif;
    padding: auto;
    z-index: 2500;
}
.svg-icon{
      padding:7px 15px;
}
.window-appicon{
      background-image: url("");
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 16px;
      width: 35px;
      height: 100%;
      position: relative;
      z-index: 2000;
      flex-shrink: 0;
      text-decoration: none;
      display: inline-flex;
}
.menubar{
      -webkit-app-region: no-drag;
      z-index: 2000;
}
.menubar>.menubar-menu-button {
      align-items: center;
      box-sizing: border-box;
      padding: 0 8px;
      cursor: default;
      -webkit-app-region: no-drag;
      zoom: 1;
      white-space: nowrap;
      outline: 0;
      line-height: 30px;
      display:inline-block;
      font-size: 13px;
      width: 60px;
      overflow: hidden;
}
.plain-uname{
      padding:0 15px; 
      font-size: 12px; font-family: 'Segoe UI','微软雅黑 Semilight','Microsoft Yahei';
      -webkit-app-region: no-drag;
      height: 100%;
      margin-left: auto;
      display: flex;
      flex-grow: 0;
      flex-shrink: 0;
      text-align: center;
      line-height: 30px;
}
.accelerator{
      color:#7f7f7f;
      display: inline-flex;
      flex-grow: 0;
      flex-shrink: 0;
      justify-content:flex-end;
      margin-left: 20px;
}
#man{
    display: flex;
    flex: 1 1 0px;
    will-change: width;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
}
.sidebar{
      -webkit-app-region: no-drag;
    display: flex;
    flex: 1;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    flex-direction: column;
    background-color: #2b579a;
    color:#fff;
    max-width: 150px;
    z-index: 3000;
    font-size: 0.8em;
}
#siderbar-header{
      display: flex;
      align-items: center;
      flex-shrink: 0;
      height: 48px;
      margin-top: 30px;
      justify-content: space-between;
      padding: 2px 28px;
}
.fileBar-inner:hover{
background-color: #124078;
}
#centerColumn{
    flex: 1 1 0px;
    display: flex;
    overflow: hidden;
    z-index: 0;
    background-color: #f3f3f3;
}
.fileBar-inner{
    box-sizing: border-box;
    min-height: 2.7rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    padding: 0 30px;
    color:#fff;
    text-decoration: none;
}
ul{
      list-style: none;
      padding: 0;
      margin: 0;
}
#siderbar-content{
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    padding-top: 1px;
}
#siderbar-footer{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
}
#greeting{
font-size: 1.4em;
padding: 40px 30px 10px 30px;
background-color: #fff;
display: flex;
flex-direction: row;
box-shadow: 0 1px 0 rgb(150 150 150 / 30%);
}
@media screen and (max-height:500px) {
      .fileBar-inner{
      min-height: 2rem;
      height: 2rem;}
}
@media screen and (max-width:360px) {
      .window-controls-container{
      display: none;
      }
}